{% extends "./inc/appbase.html" %}
{%block style%}
<style>
    .mui-table h4 ,.mui-media-body h4{
        line-height: 21px;
        font-weight: 400;
    }
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
</header>
<div class="mui-content">
    <form method="post" class="form-recharge">
    
        <div class="mui-card">
        <ul class="mui-table-view ">
                <li class="mui-table-view-divider">所需房卡</li>
                <!--  
                <li class="mui-table-view-cell mui-media">
                  <div class="mui-media-body">
                                                             数量:1000 张
                    <p class='mui-ellipsis'>账户剩余:{{userInfo.card_count}} 张</p>
                  </div>
                 </li>
                -->
               <li class="mui-table-view-cell size-14">
                   <div class="mui-row">
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>数量: 
                                <span class="mui-badge mui-badge-danger ">{{clubsmn}}</span> 张
                                </div>
                            </div>
                            <div class="mui-col-sm-6 mui-col-xs-6">
                                <div>余额:{{userInfo.card_count}} 张</div>
                            </div>
                        </div>
                </li>
                <li class="mui-table-view-divider">俱乐部名称</li>
                <div class="mui-input-row padding-10">
                    <input type="text"  placeholder="输入俱乐部名称，2-10个汉字" name="club_name" >
                </div>
                
                <li class="mui-table-view-divider ">温馨提示
                </li>
                <li class="mui-table-view-cell mui-left mui-media">
                        <p>1.创建所需房卡将直接存入俱乐部账户</p>
                        <p>2.需绑定手机号</p>
                        <p>3.每人最多创建100个俱乐部</p>
                </li>
                
            </ul>
         </div>
        <div class="mui-content-padded" style="margin-top: 20px; margin-bottom: 50px">
            <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="create">创建</button>
        </div>
    </form>
</div>

{% endblock%}

{% block script %}
<script>
    var falg = false;
    $("#create").on("tap",function () {
    	var that = this;
    	var clubsmn ="{{clubsmn}}";
    	var card_count = "{{userInfo.card_count}}";
        var club_name = $("input[name='club_name']").val();
        console.log('club_name-:'+club_name);
        
        if(club_name===''){
            mui.toast("请输入俱乐部名称！");
            return;
        }
        
        if(club_name.length>10){
            mui.toast("俱乐部名称太长,只能输入2-10个汉字！");
            return;
        }
        
        if(clubsmn>card_count){
    		//mui.toast("所需房卡数不够，请补充房卡！");
    		
    		var btnArray = ['取消', '去购买'];
            mui.confirm('所需房卡数不够，请补充房卡！', '', btnArray, function(e) {
                if (e.index == 1) {
                    //获取id
                	var href = '/center/shop';
                    mui.openWindow({
                        url:href,
                    });
                }
            })
            return;
    	}
    	
        var btnArray = ['否', '是'];
        mui.confirm('是否确认创建？', '', btnArray, function(e) {
            if (e.index == 1) {
                //获取id
            	if(falg){
                    return false;
                }
            	
                
                $(that).addClass('disabled').attr('autocomplete','off').prop('disabled',true);
                falg = true;
                
                mui.post("/center/club/create",{club_name:club_name},
                		function(data){
                	if(data.errno == 0){
                        mui.toast(data.data.name);
                        setTimeout(function(){
                            $(that).removeClass('disabled').prop('disabled',false);
                            falg=false;
                            //mui.back();
                            location.href="/center/club";
                        },1500);
                    }else {
                        if(data.errno==1001){
                            $.each(data.errmsg,function(i,n){
                                mui.toast(n);
                            })
                        }else {
                            mui.toast(data.errmsg);
                        }
                        setTimeout(function(){
                            $(that).removeClass('disabled').prop('disabled',false);
                            falg=false;
                        },1500);
                    }
                },'json');
            }
        })
        return false;
        
        
    })
</script>
{% endblock %}
